<style scoped lang="stylus" type="text/stylus">
  .schedule-contact-page {
    position : relative;
    height : 100%

    .edit-header {
      position : fixed
      top : 0
      height : 60px
      line-height : 60px;
      padding-left : 40px;
      font-size : 18px;
      background-color : #4c4c4c
      .route-title {
        color : #fff
        cursor : pointer
      }
      .page-name {
        color : #7f7f7f
      }
    }
    .schedule-contact-page-ps{
      position : relative;
      padding : 40px;
      height : 100%
    }
    .enclosure-item {
      width : 480px
      margin : 0 auto
      overflow : hidden;
    }

    .enclosure-list {
      position : relative;
      margin-bottom : 15px;
      padding-right : 30px;
    }

    .enclosure-list-con {
      height : 100%;
      padding : 20px 30px;
      font-size : 14px;
      background-color : #fff;
    }

    .enclosure-list-con span {
      display : inline-block;
      width : 30px;
      height : 30px;
      line-height : 30px;
      margin-right : 15px;
      border-radius : 100%;
      /*color            : #fff;*/
      /*background-color : #cdced6;*/
      text-align : center;
    }

    .enclosure-list-con .enclosure-list-btn {
      display : inline-block;
      margin-right : 20px;
      width : 120px;
      /*padding          : 5px 10px;*/
      /*color            : #febc7a;*/
      /*background-color : #f2f2f5;*/
    }

    .enclosure-list-con .name {
      /*display : inline-block;*/
      width : 120px;
      margin-right : 20px;
      font-size : 18px
      color: #292D3D;
    }

    .enclosure-list-con .number {
      /*display : inline-block;*/
      font-size : 14px
      color : #333
    }

    .enclosure-list-con .number.enclosure-list-btn {
      width : 180px;
    }

    .enclosure-list-con .enclosure-list-btn.disabled {
      color : #000;
      background-color : #fff;
    }

    .enclosure-list .enclosure-list-tool {
      position : absolute;
      top : 0;
      right : 0;
      bottom : 0;
      width : 20px;
    }

    .enclosure-list .enclosure-list-tool > div {
      width : 100%;
      height : 15px;
      text-align : center;
      cursor : pointer;
    }

    .enclosure-list .enclosure-list-tool span {
      color : #4ec88b;
    }

    .enclosure-list .enclosure-list-tool .up {
      margin-bottom : 20px;
    }

    .enclosure-list .enclosure-list-tool div.del {
      position : absolute;
      bottom : 0;
      color : #d26f6f;
    }

    /*=======*/
    .enclosure-add {
      height : 68px;
      line-height : 68px;
      padding-right : 30px;
    }

    .enclosure-add .con {
      height : 100%;
      font-weight : 100;
      font-size : 25px
      text-align : center;
      cursor : pointer;
      color : #4ec88b;
      background-color : #fff;
    }

    /*=====*/
    .gray span {
      color : #cdced6 !important;
    }

    placeholder(#febc7a)

    .enclosure-list input {
      border : 0;
    }

    .enclosure-list input.nothing,
    .enclosure-list input:focus {
      display : block;
      width : 100%;
      padding : 5px 10px;
      border : 1px solid #ddd;
      -webkit-border-radius : 3px;
      -moz-border-radius : 3px;
      border-radius : 3px;
      font-size : 14px;
    }
  }
</style>

<template>
  <div class="schedule-contact-page">
    <div class="edit-header">
      <span @click="GoBack()" class="route-title">设置</span>
      <span class="page-name">&nbsp;/&nbsp;政府对接人</span>
    </div>
    <VuePerfectScrollbar class="schedule-contact-page-ps">
      <div class="enclosure-item" id="enclosure-item">
        <div class="enclosure-list" v-for="(items,index) in scheduleContactList" :key="index">
          <div class="enclosure-list-con">
            <!--<span class="num">{{index+1}}</span>-->
            <div class="name">{{items.name}}</div>
            <div class="number ">
              <span v-if="items.phone">{{items.phone}}</span>
            </div>
          </div>
          <!--<div class="enclosure-list-tool">-->
          <!--<div @click="upDown(items.id,'up',index==0)" class="up" :class="{gray:index==0}">-->
          <!--<Icon type="chevron-up"></Icon>-->
          <!--</div>-->
          <!--<div @click="upDown(items.id,'down',index==scheduleContactList.length-1)" class="down"-->
          <!--:class="{gray:index==scheduleContactList.length-1}">-->
          <!--<Icon type="chevron-down"></Icon>-->
          <!--</div>-->
          <!--<div @click="del(items.id)" class="del">-->
          <!--<Icon type="close"></Icon>-->
          <!--</div>-->
          <!--</div>-->
        </div>
      </div>
      <!--<div class="enclosure-add">-->
      <!--<div class="con" @click="modal1 = true">-->
      <!--<Icon type="plus"></Icon>-->
      <!--</div>-->
      <!--</div>-->

      <!--<Modal-->
      <!--v-model="modal1"-->
      <!--title="添加政府联系人"-->
      <!--@on-ok="add('formCustom')">-->
      <!--<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">-->
      <!--<FormItem label="姓名" prop="name">-->
      <!--<Input type="text" v-model="formCustom.name"></Input>-->
      <!--</FormItem>-->
      <!--<FormItem label="电话号码" prop="phone">-->
      <!--<Input type="text" v-model="formCustom.phone"></Input>-->
      <!--</FormItem>-->
      <!--<FormItem>-->
      <!--</FormItem>-->
      <!--</Form>-->
      <!--<div slot="footer">-->
      <!--<Button @click="handleReset()" type="text">取消</Button>-->
      <!--<Button type="primary" :disabled="checkForm" size="large" @click="add('formCustom')">提交-->
      <!--</Button>-->
      <!--</div>-->
      <!--</Modal>-->
    </VuePerfectScrollbar>
  </div>

</template>

<script type="text/ecmascript-6">

  export default {
    name      : 'ScheduleContact',
    data() {
      const validateName  = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      const validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else {
          callback();
        }
      };
      return {
        scheduleContactList: [],
        modal1             : false,
        formCustom         : {
          name : '',
          phone: ''
        },
        ruleCustom         : {
          name : [{
            validator: validateName,
            trigger  : 'blur'
          }],
          phone: [{
            validator: validatePhone,
            trigger  : 'blur'
          }]
        }
      }
    },
    computed  : {
      checkForm() {
        if (this.formCustom.name && this.formCustom.phone) {
          return false
        } else {
          return 'disabled'
        }
      }
    },
    methods   : {
      getScheduleContactList() {
        this.ajaxData({
          type: 'get',
          url : '/schedule/contact/list'
        }, (res, all) => {
          this.scheduleContactList = res;
        })
      },
      add(name) {
        this.modal1 = false;
        this.$refs[name].validate((valid) => {

          if (valid) {
            this.$Message.success('提交成功!');
          } else {

            this.$Message.error('表单验证失败!');
          }
        })
      },
      handleReset() {
        this.modal1 = false;
        this.$refs['formCustom'].resetFields();
      },

      upDown(id, type, index) {
        if (index) {
          return;
        }
        this.ajaxData({
          type: 'post',
          url : `/schedule/contact/${id}/roll/${type}`
        }, (res, all) => {
          if (all.code == 0) {
            this.getScheduleContactList()
          }
        })
      },
      del(id) {
        this.ajaxData({
          type: 'delete',
          url : `/schedule/contact/${id}`
        }, (res, all) => {
          if (all.code == 0) {
            this.getScheduleContactList()
          }
        })
      }
    },
    created() {
      this.getScheduleContactList()
    }
  }
</script>
